<template>
<!--  https://www.mocky.io/v2/5cc8019d300000980a055e76-->
  <a-flex>
    <a-upload
        v-model:file-list="fileList"
        name="avatar"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="true"
        :before-upload="beforeUpload"
        @change="handleChange"
        :max-count="maxLength"
        @preview="handlePreview"
    >
      <div v-if="fileList.length < maxLength">
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text" >{{ placeholder }}</div>
      </div>
    </a-upload>
    <div class="upload-tips" v-if="props.showTips">
      <div class="tips_rows">文件大小: 不超过<span class="striking">{{props.maxSize}}MB</span></div>
      <div class="tips_rows">文件格式: <span class="striking">{{props.type}}</span></div>
    </div>
  </a-flex>
  <a-modal :open="previewVisible"
           :title="previewTitle"
           centered
           :width="750"
           :footer="null" @cancel="handleCancel">
    <video :src="previewVideo" controls class="preview-video"></video>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';

const props = defineProps({
  showTips:{
    type: Boolean,
    required: false,
    default: false
  },
  placeholder: {
    type: String,
    required: true,
  },
  type:{
    type: String,
    required: true,
  },
  maxLength: {
    type:  Number,
    required: true,
  },
  maxSize: {
    type:  Number,
    required: true,
  },
  value: {
    type: Array, // 根据实际情况调整类型
    default: () => [],
  },
});
const loading = ref<boolean>(false);
const emit = defineEmits(['update:value']);
const placeholder = props.placeholder
const maxLength = props.maxLength
const maxSize = props.maxSize
const fileList = ref(props.value);
const previewVideo = ref('')
const previewTitle = ref('')
const previewVisible = ref(false)

watch(
    () => props.value,
    (newValue) => { fileList.value = newValue;}
);


async function handlePreview(file: any){
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
  if(file.url) {
    previewVideo.value = file.url
    previewVisible.value = true;
  }else{
  }
}

function handleCancel () {
  previewVisible.value = false;
  previewVideo.value = '';
  previewTitle.value = '';
}
const handleChange = (info: UploadChangeParam) => {
  info.fileList.forEach((item:any)=>{ item.url = URL.createObjectURL(item.originFileObj) })
  console.log('info', info)
  emit('update:value', fileList.value);
};

async function handleUpload(fn:(fileList: any) => Promise<void>){
  loading.value = true;
  try {
    await fn(fileList.value)
    loading.value = false;
  }catch (e) {
    loading.value = false;
    console.log('e', e)
  }
}

const beforeUpload = (file: any) => {
  return new Promise((reject) => {
    const allowedTypes = props.type.split(','); // 将 type 属性的值拆分为一个文件类型的数组
    const fileType = file.type.split('/')[1]; // 获取文件的后缀类型

    const isAllowedType = allowedTypes.includes(fileType);
    const isLtMaxSize = file.size / 1024 / 1024 < maxSize;

    if (!isAllowedType) {
      message.error('请选择视频');
      return false;
    } else if (!isLtMaxSize){
      message.error(`视频不能超过 ${maxSize}MB!`);
      return false;
    } else {
      return reject(false);
    }
  });
};
defineExpose({ handleUpload })
</script>
<style scoped>
:deep .ant-upload-wrapper.ant-upload-picture-card-wrapper{
  width: auto;
}
.upload-tips{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  color: rgba(49, 73, 103, 0.50);
  .striking{
    color: #1BC47D;
  }
}
.preview-video{
  width: 100%;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
